@import "src/style/index";

.chat-main {
    .dialog{
        display:none;
        &.show{display:block}
        .mask{
            position:absolute;
            left:0;bottom:0;
            top:0;right:0;
            background-color:rgba(0,0,0,.01)
        }
        .dia-cont{
            position:absolute;
            left:50px;
            top:20%;
            width:260px;
            height:180px;
            background:#fff;
            border-radius:3px;
            box-shadow:2px 2px 6px #d8d8d8;
            padding:20px;
            z-index:10;
            .avatar {
                img{
                    width:58px;
                    height:58px;
                    border-radius:5px;
                }
                width:60px;
                height:60px;
                background:#fff;
                border-radius:3px;
                border:1px solid #d8d8d8;
                float: left;
                margin: 0 10px 0 0;
                border-radius: 3px;
            }
            .nickname{
                line-height:60px;
                font-size:14px;
            }
            .remark{
                margin:20px 0 0;
                padding:20px 0 0;
                border-top:1px solid #ddd;
                line-height:24px;
                label{
                    color:#a19f9f
                }
                .input{
                    margin-left:5px;
                    border:1px solid transparent;
                    padding:2px 4px;
                    border-radius:3px;
                    line-height:20px;
                    max-width:106px;
                    &:hover{
                        background:#e3eef5;
                        border:1px solid #b6dbf3;
                    }
                    &:focus{
                        background:none;
                        border:1px solid #f1f1f1;
                    }
                }
            }
        }

    }
    .group-name{
        height:50px;
        line-height:50px;
        padding:0 20px;
        background-color:#f7fcff;
        border-bottom:1px solid #ddd;
        h3{
            font-size:15px;
        }
    }
    .message {
        
        height:calc(100% - 50px);
        position:relative;
        overflow: hidden;
        // overflow-y: scroll;
        ul{padding: 10px 15px;}
        &.hidden{overflow-y:hidden}
        li {
            margin-bottom: 15px;
            overflow: hidden;
            &.first{
                text-align:center;
                .history{
                    background:#dcdcdc;
                    padding:3px 5px;
                    border-radius:3px;
                    font-size:12px;
                    cursor:pointer ;
                }
            }
        }

        .time {
            margin: 7px 0;
            text-align: center;

            > span {
                display: inline-block;
                padding: 0 18px;
                font-size: 12px;
                color: #fff;
                border-radius: 2px;
                background-color: #dcdcdc;
            }
        }
        .avatar {
            float: left;
            margin: 0 10px 0 0;
            border-radius: 100px;
        }
        .text {
            display: inline-block;
            position: relative;
            padding: 4.5px 10px;
            max-width: calc(100% - 150px);
            min-height: 30px;
            line-height:21px;
            font-size: 12px;
            text-align: left;
            word-break: break-all;
            background-color: #f7fcff;
            border-radius: 4px;
            margin: 3px 0 0;
            a.link{
                color:#1144e7;
            }
            &:before {
                content: " ";
                position: absolute;
                top: 9px;
                right: 100%;
                border: 6px solid transparent;
                border-right-color: #f7fcff;
            }
        }

        .self {
            text-align: right;

            .avatar {
                float: right;
                margin: 0 0 0 10px;
            }
            .text {
                background-color: #b2e281;

                &:before {
                    right: inherit;
                    left: 100%;
                    border-right-color: transparent;
                    border-left-color: #b2e281;
                }
            }
        }
    }
    .iScrollVerticalScrollbar.iScrollLoneScrollbar .iScrollIndicator{
        background: rgba(200, 199, 199, 0.998039);
        border: 1px solid rgba(220, 220, 210, 1);
    }
}